<template>
    <div class="w-full h-full px-0 overflow-hidden" style="background: var(--boxborder);">
        <div class="background h-screen flex justify-center items-center">
            <div class="h-[30rem] w-[50rem] rounded-lg shadow-md flex flex-wrap" style="background:rgba(0,0,0, 0.1);">

                <div class="ml-72 w-60 ">
                    <p class="mt-10 w-60 text-center text-black">注册</p>
                    <input type="text" class="w-60 h-8 mt-8 outline-0 border-b-[1px] border-black"
                        style="text-indent:1ch ;background: none;" placeholder="请输入你的用户名" v-model="username">
                    <input type="password" class="w-60 mt-6 h-8 outline-0 border-b-[1px] border-black"
                        style="text-indent: 1ch;background: none;" placeholder="请输入你的密码" v-model="password">
                    <input type="password" class="w-60 mt-6 h-8 outline-0 border-b-[1px] border-black"
                        style="text-indent: 1ch;background: none;" placeholder="请再次输入输入你的密码" v-model="password2">
                    <button class="w-60 mt-6 h-10 bg-black text-white rounded-3xl" @click="sentregister()">注册</button>

                    <div class="mt-20">
                        <router-link class="hover:border-b-[1px] border-gray-600" to="/login">已有账号?返回登录页面</router-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { useUserStore } from "../store/user"
const router = useRouter()
const username = ref()
const password = ref()
const password2 = ref()
const store = useUserStore();
interface register {
    code: number,
    message: string,
    data?: {
        usename: string,
        token: string
    },
}
//注册函数
const sentregister = async () => {
    if (username.value === '' || password.value === '' || password2.value === '') {
        return alert("信息不完整");
    } else if (password.value !== password2.value) {
        return alert("两次输入的密码不一致");
    } else {
        const register = await useAsyncData<register>('register', () => $fetch('/api/user/register', { method: "post", body: { username: username.value, password: password.value } }))
        if (register.data.value?.code == 200) {
            alert("注册成功,前往主页")
            store.$patch({
                login: true,
                token: register.data.value?.data?.token
            })
            router.push('/home')
        } else {
            alert("用户名已存在")
        }

    }
} 
</script>

<style lang="less">
.background {
    background-image: url(../public/img/login.png);
}
</style>